<template>
  <div id="app">
    <h1>评论区</h1>

    <ul>
      <li v-for="item in res.data.data" :key="item.id">
        姓名：{{item.name}}<br>
        评论：{{item.content}}
        <button @click="dellist(item.id)">删除</button>
      </li>
    </ul>
    <div class="ol">
      <input type="text" name="lbw" v-model="cc">
      <button @click="addlist(name,content)">添加</button>
    </div>
  </div>

</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
        res:'',
        item:'',
        name:'',
        content:'',
        cc:'',
    };
  },
 
  methods:{
    list(){
        return axios.get('http://chst.vip:1902/students/getstulist')
        .then(res=>{
            this.res = res        
        console.log(res,"iii");
    
    })
    },

    addlist(){
        return axios({
          url:'http://chst.vip:1902/students/addlist',
          method:'post',
          data:{
            name:this.name,
            content:this.content,
          },
        })
        .then(res=>{
          console.log(res);

          
        })
        
    },

    dellist(id){
      return axios.get('http://chst.vip:1902/students/del',{
        params:{
          id:id
        }
      })
        .then(res=>{
            this.res = res     
           
        console.log(res,"iii");
    
    })
    }
  },

  mounted() {
    this.list()
    this.addlist()
    this.dellist()

  },
};
</script>

<style>
#app {
  margin: 0 auto;
  width: 900px;
  height: 800px;
  border: 1px solid black;
  overflow:auto;
}
.ol{
  width: 900px;
  height: 100px;
  border: 1px solid black;
}
li{
  list-style: none;
}
</style>